<template>
  <Editor :mode="mode" :plugins="plugins" :value="value" @change="handleChange" />
</template>

<script lang="ts" setup>
import { Editor } from '@bytemd/vue-next';
import { defineProps, withDefaults } from 'vue';
import gfm from '@bytemd/plugin-gfm';
import highlight from '@bytemd/plugin-highlight';

const plugins = [gfm(), highlight()];

interface Props {
  value: string;
  mode: string;
  handleChange: (v: string) => void;
}

const props = withDefaults(defineProps<Props>(), {
  value: () => ' ',
  mode: () => 'split',
  handleChange: (v: string) => {
    console.log(v);
  }
});
</script>

<style>
.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {
  display: none;
}
</style>
